<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>查看实验</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

	</head>

	<body>
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
		<!--
        	作者：offline
        	时间：2018-08-29
        	描述:遮罩样式
        -->

		<style>
			.black_overlay {
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: lightgray;
				z-index: 1001;
				-moz-opacity: 0.8;
				opacity: .80;
				filter: alpha(opacity=80);
			}
			
			.white_content {
				display: none;
				position: absolute;
				top: 20%;
				left: 25%;
				width: 50%;
				height: 40%;
				box-shadow: 2px 2px 10px #009688;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
			
			.white_content_small {
				display: none;
				position: absolute;
				top: 20%;
				left: 30%;
				width: 40%;
				height: 50%;
				border: 16px solid lightblue;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
		</style>

		<div class="layui-container" id="all">

			<div class="layui-row" id="app">

				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
					<legend>查看内容</legend>
				</fieldset>

				<div class="layui-col-md-offset9">

					<div class="layui-form-item">

						<div class="layui-input-inline">
							<input type="text" id="searchbtn" name="" lay-verify="required" placeholder="按课程名称搜索" autocomplete="off" class="layui-input" v-model="searchVal">
						</div>

					</div>

				</div>
				<div class="layui-table">

					<table class="layui-table" lay-skin="line" style="text-align: center;">
						<colgroup>
							<col width="100">
							<col width="300">
							<col width="300">
							<col width="300">
						</colgroup>
						<thead>
							<tr>
								<th style="text-align: center;">课程名称</th>
								<th style="text-align: center;">实验名称</th>
								<th style="text-align: center;">实验时间</th>
								<th style="text-align: center;">已上传文档</th>
								<th style="text-align: center;">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in slist">
								<td>{{item.couName}}</td>
								<td>{{item.expName}}</td>
								<td>{{item.startTime}}--{{item.endTime}}</td>
								<td>
									<a style="cursor:pointer" title="点击下载" id="homed" @click="downOne(item.expid)">{{item.oldName}}</a>
								</td>
								<td>
									<div class="layui-btn-group">

										<button class="layui-btn" :value="item.expid" @click="download(item.expid)" id="downloadbtn" style="margin-top: 5px;">实验内容</button></a>
										<!--<a href="javascript:;"> <button class="layui-btn ">在线测试</button></a>-->

										<button type="file" class="layui-btn" id="Button1" onclick="ShowDiv('MyDiv','fade')" @click="expid=item.expid" style="margin-top: 5px;">文档上传</button>

									</div>
								</td>
							</tr>

						</tbody>
					</table>
				</div>
				<div class="layui-col-md-offset2" style="margin-top: 50px;">
					<!--
	作者：offline
	时间：2018-08-27
	描述：分页div demo7
-->
					<table id="demo"></table>

				</div>
			</div>

		</div>

		<!--<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
		弹出层时背景层DIV-->
		<div id="fade" class="black_overlay">
		</div>
		<div id="MyDiv" class="white_content">
			<div style="text-align: right; cursor: default; height: 10%;">
				<span onclick="CloseDiv('MyDiv','fade')"><i class="layui-icon layui-icon-close" style="font-size: 30px;"></i>  </span>
			</div>

			<form class="layui-form" id="uploadForm" enctype="multipart/form-data">

				<div class="layui-form-item layui-col-lg-offset3" style="margin-top: 5%;">
					
					<div class="layui-input-block ">

						<input type="file" name="files" id="file_input" accept="*.doc" onchange="loadFile(this)" title="上传文件后缀名为.docx且小于18M"/>

					</div>

					<div class="layui-input-block" style="margin-top: 10%;">

						<button class="layui-btn" id="upload" type="button">立即提交</button>
						<div style="display: inline;position: relative;top:1%;left: 3%;"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px; display:none;" id="wait"></i> </div>
					</div>
				</div>
			</form>
		</div>

		<script src="../layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/jquery.cookie.js"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			$.ajax({
				url: "http://localhost:8080/student/nodo.do",
				async: "get",
				dataType: "json",
				data: {
					sid: $.cookie("sid")
				},
				success: function(data) {
					if(data.info == "404") {
						window.location.href = "stulogin.html";
					}
				}

			})

			$(document).ready(function() {
				$(document).bind("contextmenu", function(e) {
					return false;
				});
			});

			//弹出隐藏层
			function ShowDiv(show_div, bg_div) {
				window.scrollTo(0, 0);
				document.getElementById(show_div).style.display = 'block';
				document.getElementById(bg_div).style.display = 'block';
				var bgdiv = document.getElementById(bg_div);
				bgdiv.style.width = document.body.scrollWidth;
				// bgdiv.style.height = $(document).height();
				$("#" + bg_div).height($(document).height());
			};
			//关闭弹出层
			function CloseDiv(show_div, bg_div) {
				document.getElementById(show_div).style.display = 'none';
				document.getElementById(bg_div).style.display = 'none';
			};

			//完整功能
			layui.use(['laypage', 'layer'], function() {
				var laypage = layui.laypage,
					layer = layui.layer;

				//完整功能
				laypage.render({
					elem: 'demo7',
					count: 150,
					layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
					jump: function(obj) {
						console.log(obj)
					}
				});

			});

			layui.use('upload', function() {
				var $ = layui.jquery,
					upload = layui.upload;

				//指定允许上传的文件类型
				upload.render({
					elem: '#test3',
					url: "'http://127.0.0.1:8080/student/seedetail/springUpload.do?expid='+item.expid",
					accept: 'file' //普通文件
						,
					data: {
						sid: $.cookie("sid")
					},
					done: function(res) {
						console.log(res)
					}
				});

				//exts: 'zip|rar|7z' //只允许上传压缩文件
				//	size: 60 //限制文件大小，单位 KB
			});

			//			$(function() {
			//				$("#searchbtn").keydown(function(event) {
			//					if(event.keyCode == 13) {
			//						//执行操作
			//						alert($("#searchbtn").val());
			//					}
			//				})
			//			});

			var list;
			$.ajax({
				type: "get",
				dataType: "json",
				url: "http://127.0.0.1:8080/student/seedetail/list.do",
				async: false,
				data: {
					sid: $.cookie("sid")
				},
				success: function(data) {
					list = data;
				}
			});

			function openNewPost(verb, urls, datas, target) {
				//alert("okkkk9");
				var form = document.createElement("form");
				form.action = urls;
				form.method = verb;
				form.target = target || "_self";
				if(datas) {
					for(var key in datas) {
						var input = document.createElement("textarea");
						input.name = key;
						//alert("name: " + input.name);
						input.value = typeof datas[key] === "object" ? JSON
							.stringify(datas[key]) : datas[key];
						//alert("value:" + input.value);
						form.appendChild(input);
					}
				}
				form.style.display = 'none';
				document.body.appendChild(form);
				form.submit();
				document.body.removeChild(form);
			}

			var vue = new Vue({
				el: "#app",
				data: {
					msglist: list,
					searchVal: '', //默认输入为空
					letter: '', //默认不排序
					original: false, //默认从小到大排列
					expid: 0
				},
				methods: {
					download: function(data) {

						var a = {
							"expid": data
						};
						var verb = "post";
						var urls = "http://127.0.0.1:8080/student/seedetail/singleDownload.do?sid=" + $.cookie("sid");
						var datas = a;
						var target = "_self";

						openNewPost(verb, urls, datas, target);

					},
					downOne: function(data) {

						var a = {
							"expid": data
						};
						var verb = "post";
						var urls = "http://127.0.0.1:8080/student/seedetail/homeworkDownload.do?sid=" + $.cookie("sid");
						var datas = a;
						var target = "_self";

						openNewPost(verb, urls, datas, target);

					}

				},
				//通过计算属性过滤数据
				computed: {
					slist: function() {
						var _this = this;
						//逻辑-->根据input的value值筛选msglist中的数据
						var arrByZM = []; //声明一个空数组来存放数据
						for(var i = 0; i < this.msglist.length; i++) {
							//for循环数据中的每一项（根据name值）
							if(this.msglist[i].couName.search(this.searchVal) != -1) {
								//判断输入框中的值是否可以匹配到数据，如果匹配成功
								arrByZM.push(this.msglist[i]);
								//向空数组中添加数据
							}
						}
						//逻辑-->升序降序排列  false: 默认从小到大  true：默认从大到小
						//判断，如果要letter不为空，说明要进行排序
						if(this.letter != '') {
							arrByZM.sort(function(a, b) {
								if(_this.original) {
									return b[_this.letter] - a[_this.letter];
								} else {
									return a[_this.letter] - b[_this.letter];
								}
							});
						}
						//一定要记得返回筛选后的数据
						return arrByZM;
					}
				}

			});

			//上传文件限制类型和大小
			function loadFile(office) {
				var filePath = office.value;
				var fileExt = filePath.substring(filePath.lastIndexOf("."))
					.toLowerCase();

				if(!checkFileExt(fileExt)) {
					alert("文件类型错误,请重新上传！");
					office.value = "";
					return;
				} else if((office.files[0].size / 1024).toFixed(0) > 18432) {
					alert("上传文件需小于18M！");
					office.value = "";
					return;

				}

				if(office.files && office.files[0]) {
					//               alert(office);
					//                alert(office.files[0])
					//alert('你选择的文件大小' + (office.files[0].size / 1024).toFixed(0) + "kb");
					//                var xx = office.files[0];
					//                for (var i in xx) {
					//                    alert(xx[i])
					//                }
				} else {
					office.select();
					var url = document.selection.createRange().text;
					try {
						var fso = new ActiveXObject("Scripting.FileSystemObject");
					} catch(e) {
						alert('如果你用的是ie8以下 请将安全级别调低！');
					}
					//alert("文件大小为：" + (fso.GetFile(url).size / 1024).toFixed(0) + "kb");
				}
			}

			function checkFileExt(ext) {
				if(!ext.match(/.docx/i)) {
					return false;
				}
				return true;
			}

			//上传文件弹窗
			$("#upload").click(function() {

				$("#wait").show();
				var form = new FormData(document.getElementById("uploadForm"));
				//             var req = new XMLHttpRequest();
				//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
				//             req.send(form);
				var fname = $("#file_input").val();

				if(fname.length != 0) {
					$("#upload").addClass("layui-btn-disabled");

					$.ajax({

						url: "http://127.0.0.1:8080/student/seedetail/uploadserver.do?expid=" + vue.expid + "&&sid=" + $.cookie("sid"),
						type: "post",
						data: form,
						dataType: "json",
						processData: false,
						contentType: false,

						success: function(data) {

							$.ajax({
								type: "get",
								dataType: "json",
								url: "http://127.0.0.1:8080/student/seedetail/list.do",
								data: {
									sid: $.cookie("sid")
								},
								async: false,
								success: function(data) {
									vue.msglist = data;
								}
							});

							//上传成功，调回原页面
							$("#wait").hide();
							$("#upload").removeClass("layui-btn-disabled");
							CloseDiv('MyDiv', 'fade');

						},
						error: function(e) {
							alert("上传失败");
							$("#wait").hide();
							$("#upload").removeClass("layui-btn-disabled");
							CloseDiv('MyDiv', 'fade');
						}
					});
				} else {
					alert("请选择文件后上传");
					$("#upload").removeClass("layui-btn-disabled");
					$("#wait").hide();
				}
			});
		</script>

	</body>

</html>